{% extends "layout.html" %}


{% block title %}
钻孔
{% endblock %}

{% block style %}
<style type="text/css">
body{
  overflow: hidden;
}
</style>
{% endblock %}

{% block mainbody %}
    <canvas id="canvasTest" style ="width:256px; height:128px;display: none"></canvas>
    <div id="world" style ="width:100%; height:100%"></div>
    <div id = "tooltips" style = "width:200px; height:100px;position: absolute; z-index: 999999; display: none; background-color: #22ff22 ;color: #ffeeff;left:0px;top:0px"></div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{{url_for('monitor.static', filename='scripts/require.js')}}"></script>
    <script type="text/javascript" src="{{url_for('monitor.static', filename='scripts/threejs/three.js')}}"></script>
    <script type="text/javascript" src="{{url_for('monitor.static', filename='scripts/threejs/OrbitControls.js')}}"></script>
    <script type="text/javascript" src="{{url_for('monitor.static', filename='scripts/threejs/TweenMax.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('monitor.static', filename='js/world.js')}}"></script>
    <script type="text/javascript" >
        require(['world'], function(world) {
            world.new({
                container: $("#world")[0]
            });
            var matFloor = new THREE.MeshPhongMaterial();
            var matBox = new THREE.MeshPhongMaterial( { color: 0x4080ff } );
            var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
            var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
            var mshFloor = new THREE.Mesh( geoFloor, matFloor );
            var mshBox = new THREE.Mesh( geoBox, matBox );


            var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
            var spotLight = new THREE.SpotLight( 0xffffff, 1 );
            var lightHelper;

            var controller = {
                folder1: {
                    help: function() {
                        alert('folder1')
                    },
                    message: "hello folder1",
                },
                folder2: {
                    help: function() {
                        alert('folder2')
                    },
                    message: "hello folder2",
                    radious: [0.4, 0, 1, 0.2],
                    selected: ["china", "japan", "Canada"],
                    // choosed: {cat:0, dog:1 , donkey:2},

                    folder3: {
                        hello: "world"
                    },
                    color0: "#ffae23",
                },
                help: function() {
                    alert('ab');
                },
                color0: "#ffae23",
            };

            world.initGui(controller);

            world.renderer.shadowMap.enabled = true;
            world.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            world.renderer.gammaInput = true;
            world.renderer.gammaOutput = true;

            spotLight.position.set( 15, 40, 35 );
            spotLight.castShadow = true;
            spotLight.angle = Math.PI / 4;
            spotLight.penumbra = 0.05;
            spotLight.decay = 2;
            spotLight.distance = 200;
            spotLight.shadow.mapSize.width = 1024;
            spotLight.shadow.mapSize.height = 1024;
            spotLight.shadow.camera.near = 1;
            spotLight.shadow.camera.far = 200;
            lightHelper = new THREE.SpotLightHelper( spotLight );


            matFloor.color.set( 0x808080 );
            mshFloor.receiveShadow = true;
            mshFloor.position.set( 0, - 0.05, 0 );
            mshBox.castShadow = true;
            mshBox.position.set( 40, 1.8, 0 );

            world.add(mshFloor);
            world.add(mshBox );
            world.add(ambient );
            world.add(spotLight );
            world.add(lightHelper );
            world.add(new THREE.AxisHelper( 10 )  );
        });
    </script>
{% endblock %}